<template>
<view class='container'>
	  <view class='header'>
	    <text class="t1">登录</text>
	  </view>
	  <form bindsubmit="formSubmit">
	    <view class='section'>
	      <text>手机号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
	      <input class="inp" type='number' placeholder='手机号' name="no" v-model="phone"/>
	    </view>
	    <view class='action'>
	      <text>短信验证码:&nbsp;</text>
	      <input password='true' placeholder='短信验证码' name="pwd" v-model="num"/>
		  <button class="send" @click="yanzheng">获取验证码</button>
	    </view>
		{{$store.state.cartoonData.code}}
	    <view class='button'>
	      <button type='primary' form-type='submit' @click="login">登录</button>
		  
	    </view>
		</form>
		</view>
		<button class="wechat" open-type='getUserInfo' @click="getuserinfo">微信账号登录</button>
</template>

<script>
	// import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				phone:"",
				num:"",
			}
		},
		methods: {
			login(){
				const myreg = /^(14[0-9]|13[0-9]|15[0-9]|17[0-9]|18[0-9])\d{8}$$/
				const pattern = /\d{4}/;
				let that = this;
				if(myreg.test(this.phone)){
					if(pattern.test(this.num)){
						uni.switchTab({
						  url: '/pages/index/index'
						})
					}else{
						uni.showToast({
							title:'请输入4位数验证码',
							icon:'none'
						})
					}
					
				}else{
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none'
					})
				}
				uni.request({
					url:'http://172.16.123.103:8090/user/login',
					// url:'http://47.192.83.237:8090/user/login',
					method:'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{phone:this.phone,code: this.$store.state.cartoonData.code},
					dataType:'json',
					success:function(res){
						console.log(res);
						that.$store.dispatch('getToken',res.data.data)
						// uni.setStorageSync('token',JSON.stringify(res.data.data))
					},
					fail:function(err){
						console.log(err);
					}
				})
			},
			// ...mapActions({
			// 	getCode:'cartoonData/getCode'
			// }),
			yanzheng(){
				console.log(this.phone);
				let that = this;
				console.log(this.$store.state.cartoonData.code);
				uni.request({
					url:'http://172.16.123.103:8090/login/sendSms',
					// url:'http://47.192.83.237:8090/login/sendSms',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					method:"POST",
					data:{phone:this.phone},
					dataType:'json',
					success:function(res){
						console.log(res);
						that.$store.dispatch('getCode',res.data.data)						
					},
					fail:function(err){
						console.log(err);
					}
				})
			},
			getuserinfo(){
				uni.getUserProfile({
					desc:'获取用户信息',
					success(res) {
						// console.log(res);
						uni.switchTab({
							url:'/pages/index/index'
						})
					},
					fail(res) {
						// console.log(res);
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* pages/login/login.wxss */
	form{
	  width: 310px;
	  height: 240px;
	  line-height: 40px;
	  /* border: 1px solid red;  */
	}
	input{
	  border: 1px solid #ccc;
	  width: 150px;
	  height: 40px;
	}
	.inp{
		width: 250px;
	}
	.button{
	  margin-top: 20px;
	}
	.header text{
	  font-size: 25px;
	  color: #666;
	}
	form text{
	  font-size: 20px;
	  color: #666;
	}
	.fpwd{
	  margin-top: 200px;
	}
	.fpwd text{
	  color: #ccc;
	  font-size: 18px;
	}
	.send{
		font-size: 10px;
		width: 80px;
		text-align: center;
		height: 45px;
		line-height: 45px;
	}
	.section{
		display: flex;
		margin-top: 20%;
	}
	.action{
		display: flex;
		margin-top: 20%;
	}
	.t1{
		color: black;
		font-size: 80rem;
		margin-left: 45%;
	}
	.button{
		margin-top: 25%;
	}
</style>
